<template>
  <div id="inDispatch">
    <div class="header2">
      <div class="title">运单详情</div>
      <div class="actions">
        <span v-if="dataObj.status_num == 1 || dataObj.status_num == 2" @click="handleCancelOrder">取消运单</span>
      </div>
    </div>
    <load-more tip="加载数据中..." v-if="!loading"></load-more>
    <div v-if="loading">
      <div class="waiting" v-if="dataObj.status_num == 1">
        <img src="../../static/img/waiting.png" style="width: 1.35rem; height: 0.9rem; display: block; margin: 0 auto;" />
        <div class="overflowtext flex-auto" style="font-size: 0.32rem; margin-top: 0.15rem;">已通知<countup :end-val="dataObj.push_count" :duration="3"  class="countupd text-orange"></countup>位配送员，等待抢单中</div>
      </div>
      <div style="margin-top: 0.1rem;" v-if="dataObj.status_num != 1 && qid">
        <div class="penson">
          <div class="headimg"><img :src="dataObj.userq.face? dataObj.userq.face: '../../static/img/noheadpic.png'" /></div>
          <div class="flex-auto">
            <p class="flex flex-middle">
              <span class="overflowtext" style="font-size: 0.3rem;">{{dataObj.userq.nick_name}}</span>
              <i class="icon icon-qiye" v-if="dataObj.userq.verify_company == 1"></i>
            </p>
            <div class="flex flex-middle">
              <rater disabled v-model="comment_score" active-color="#ff9800"></rater>
              <span style="color: #ff9800; margin-left: 0.15rem; font-size: 0.26rem;">{{ comment_score }}<span style="font-size: 0.24rem;">分</span>
              <span class="text-gray">{{dataObj.userq.order_qiang || 0}}<span style="font-size: 0.24rem;">单</span></span>
              </span>
            </div>
            <p class="flex text-gray" style="line-height: 0.34rem;" v-if="type == 'xianshitong' || type == 'tongchenggongpei'">
              <i class="icon icon-map" style="font-size: 0.3rem;"></i>
              <span class="overflowtext">{{ dataObj.userq.company_address }}</span>
              <i class="icon icon-daohang" style="font-size: 0.3rem; color: #0d83d3;"></i>
            </p>
            <p class="flex text-gray" style="line-height: 0.34rem;" v-if="type == 'xiaojiansudi' || type == 'tongchengkuaiche'">
              <span class="overflowtext">{{ dataObj.userq.carname }}</span>
            </p>
          </div>
          <div class="other text-orange text-right">
            <a :href="'tel:' + dataObj.userq.phone" class="text-orange"><i class="icon icon-phone"></i></a>
          </div>
        </div>
      </div>
      <div class="items">
        <div class="address vux-1px-b">
          <div class="addresslist flex flex-middle">
            <div>
              <i class="icon icon-quan1 text-orange"></i>
            </div>
            <div class="flex-auto">
              <p class="overflowtext">{{dataObj.laddr.laddr}}{{dataObj.laddr.laddr_more}}</p>
              <p class="vux-1px-t" style="line-height: 0.7rem;">{{dataObj.laddr.lphone}}
                <x-button style="float: right; margin-top: 0.1rem;" type="default" action-type="button" mini v-if="(type == 'tongchengkuaiche' || type == 'tongchenggongpei') && dataObj.status_num != 1">取货码: {{dataObj.laddr.grab_sms}}</x-button>
              </p>
            </div>
          </div>
        </div>
      </div>
      <div class="items" v-for="item in dataObj.raddr">
        <div class="address vux-1px-b">
          <div class="addresslist flex flex-middle">
            <div>
              <i class="icon icon-quan1 green"></i>
            </div>
            <div class="flex-auto">
              <p class="overflowtext">{{item.raddr}}{{item.raddr_more}}</p>
              <p class="vux-1px-t">{{item.rphone}}
                <span v-if="showTime" style="float: right; font-size: 0.26rem;" class="text-orange">
                  <span v-if="!item.sign_time">待送达</span>
                  <span v-else>送达:{{item.sign_time_pc}}</span>
                </span>
              </p>
            </div>
          </div>
        </div>
      </div>

      <group style="margin-top: 0.15rem;">
        <cell title="运单单号" :value="dataObj.num"></cell>
        <cell title="下单时间" :value="dataObj.time"></cell>
        <cell title="抢单时间" v-if="dataObj.status_num != 1 && qid" :value="dataObj.take_time"></cell>
        <cell title="最晚取货" :value="dataObj.lastest_time_m"></cell>
        <cell title="最晚收货" :value="dataObj.lastest_time"></cell>
        <cell title="货物品类" class="fourzi" v-if="dataObj.yjhj != 1">
          <div slot="value" class="overflowtext">
            <span>{{dataObj.goods}}</span>
          </div>
        </cell>
        <cell title="货物类型" class="fourzi" v-if="type == 'kuaidibao' && dataObj.yjhj != 1">
          <div slot="value" class="overflowtext">
            <span>{{dataObj.goods_type}}</span>
          </div>
        </cell>
        <cell title="货物重量" class="fourzi" v-if="type == 'kuaidibao' && dataObj.yjhj != 1">
          <div slot="value" class="overflowtext">
            <span>{{dataObj.goods_weight}}</span>
          </div>
        </cell>
        <cell title="快递公司" class="fourzi" v-if="type == 'kuaidibao' && dataObj.yjhj != 1">
          <div slot="value" class="overflowtext">
            <span>{{dataObj.kuaidi}}</span>
          </div>
        </cell>
        <cell title="货物详情" class="fourzi" v-if="type != 'kuaidibao' && type != 'tongchengkuaiche' && type != 'xiaojiansudi'">
          <div slot="value" class="overflowtext">
            <span>{{dataObj.total}}件, {{dataObj.weight}}公斤, {{dataObj.volume}}</span>
          </div>
        </cell>
        <cell title="货物保额" class="fourzi" v-if="type != 'kuaidibao'  && type != 'xiaojiansudi' && (dataObj.ins_account > 0 || dataObj.baoe > 0)">
          <div slot="value" class="overflowtext">
            <span>{{dataObj.ins_account}}{{dataObj.baoe}}元</span>
          </div>
        </cell>
        <cell title="货物保费" class="fourzi" v-if="type != 'kuaidibao'  && type != 'xiaojiansudi' && (dataObj.ins_account > 0 || dataObj.baoe > 0)">
          <div slot="value" class="overflowtext">
            <span class="text-orange">{{dataObj.ins_fee}}{{dataObj.baoxian}}元</span>
          </div>
        </cell>
        <cell title="额外需求" class="fourzi" v-if="type != 'kuaidibao'  && type != 'xiaojiansudi' && dataObj.yjhj != 1">
          <div slot="value" class="overflowtext">
            <span>{{dataObj.additional_demand}}{{dataObj.more_request}}</span>
          </div>
        </cell>
        <cell title="送达距离" v-if="type != 'kuaidibao' && dataObj.yjhj != 1">
          <div slot="value" class="overflowtext">
            <span>{{dataObj.distance}} Km</span>
          </div>
        </cell>
      </group>

      <group style="margin-top: 0.15rem;" v-if="type == 'kuaidibao'">
        <cell title="定金" v-if="dataObj.status_num != 5">
          <div slot="value">
            <b style="color: #ff5722;">{{dataObj.allmoney}}元</b>
          </div>
        </cell>
      </group>
      <group style="margin-top: 0.15rem;">
        <cell title="支付方式" v-if="type == 'xiaojiansudi' || type == 'tongchengkuaiche'">
          <div slot="value">
            <span v-if="dataObj.yjhj == 1">定金</span>
            <span v-else>
              <span v-if="dataObj.paytype == 1">线下支付</span>
              <span v-if="dataObj.paytype == 0">全款</span>
            </span>
          </div>
        </cell>
        <cell title="支付方式" v-if="type == 'xianshitong' || type == 'tongchenggongpei'">
          <div slot="value">
            <span v-if="dataObj.paytype == 1">收货人付款</span>
            <span v-if="dataObj.paytype == 0">发货人付款</span>
          </div>
        </cell>
        <cell title="运费总计" v-if="type != 'kuaidibao'">
          <div slot="value">
            <b style="color: #ff5722;">{{dataObj.allmoney}}元</b>
          </div>
        </cell>
        <cell title="小费" v-if="type =='xiaojiansudi' || type == 'tongchengkuaiche'">
          <div slot="value">
            <b style="color: #ff5722;">{{dataObj.tip}}元</b>
          </div>
        </cell>
      </group>

    </div>
    <div class="amap-wrapper amap-wrapper2" :class="{'amap-wrapper-show': showReason}" :style="{height: $store.state.bodyHeiht}">
      <CancelOrderReason
        :type="type"
        @on-cancle="showReason = false"
        @on-submit="reasonSub"
      ></CancelOrderReason>
    </div>
  </div>
</template>
<script>
import PubHeader from '../components/PubHeader.vue'
import { Rater, TransferDom, Cell, LoadMore, Countup } from 'vux'
import { get_time_format } from '../libs/until'
import CancelOrderReason from '../components/CancelOrderReason.vue'
import { isWechat, getWechatConfig } from '../libs/fn'
export default{
  directives: {
    TransferDom
  },
  name: 'inDispatch',
  components: {
    PubHeader,
    Rater,
    Countup,
    LoadMore,
    Cell,
    CancelOrderReason
  },
  computed: {
    type(){
      return this.$route.query.type
    }
  },
  created() {
    if(!this.$route.query.type) {
      this.$router.push('/')
      return
    }
    if(isWechat()) {
      const { path } = this.$route
      getWechatConfig(path, this.$store.state.userInfo.uid, this.$store.state.userInfo.token)
    }
    this.$wechat.ready(() => {
      this.$wechat.onMenuShareAppMessage(this.wechatShareConfig)
      this.$wechat.onMenuShareTimeline(this.wechatShareConfig)
      this.$wechat.onMenuShareWeibo(this.wechatShareConfig)
      this.$wechat.onMenuShareQZone(this.wechatShareConfig)
    })
    const uid =  this.$store.state.userInfo.uid
    const oid = this.$route.query.oid

    this.$http.post(this.url[this.type], qs.stringify({
      uid, oid,
      client: $config.client_type,
      device: $config.device_type,
      token: this.$store.state.userInfo.token
    })).then((res) => {
      const {code, data, msg} = res.data
      if(code == '1') {
        if(data.status_num === undefined) {
          this.$vux.toast.text('订单已失效', 'middle')
          this.$router.go(-1)
          return
        }
        this.loading = true
        this.dataObj = data
        this.dataObj.lastest_time = get_time_format(data.lastest_time)
        this.dataObj.lastest_time_m = get_time_format(data.lastest_time_m)
        this.dataObj.take_time = get_time_format(data.take_time)
        this.dataObj.time = get_time_format(data.time)
        if(data.userq){
          this.qid = data.userq.id || null
          this.comment_score = data.userq.comment_score? data.userq.comment_score: 0
        }
        const type = this.type
        const status = data.status_num
        if((type == 'tongchenggongpei' || type == 'xianshitong') && (status == 5 || status == 4)) {
          this.showTime = true
        }
        if((type == 'xiaojiansudi' || type == 'tongchengkuaiche') && (status == 3 || status == 4)) {
          this.showTime = true
        }
        this.wechatShareConfig.link = data.shareurl || $config.wechatHost + '/?#'
      } else if (code == '3') {
        this.$vux.toast.text($config.loginErrMsg, 'middle')
        this.$router.push({path: '/logout'})
      }else {
        this.$vux.toast.text(msg, 'middle')
      }
    }).catch((err) => {
      this.$vux.toast.text($config.errMsg, 'middle')
    })
  },
  data() {
    return {
      qid: null,
      wechatShareConfig: {
        title: '刚用了途鸟配送发货，体验超棒！您也来试一下呗！',
        desc: '途鸟配送派单便捷、极速响应、送货省心！你也来体验一下呗！',
        link: '',
        imgUrl: $config.wechatHost + '/static/img/applogo.png'
      },
      comment_score: 0,
      uid: this.$store.state.userInfo.uid,
      data3: 4,
      showReason: false,
      oid: this.$route.query.oid,
      btnLoading: false,
      loading: false,
      dataObj: [],
      show: false,
      showTime: false,
      reason: '',
      howlong: 3,
      now: parseInt(Date.parse(new Date()) / 1000),
      url: {
        kuaidibao: $config.host + '/api/Expresspass/getExpressOrder',
        tongchenggongpei: $config.host + '/api/Citysemidiurnal/getCityOrder',
        xianshitong: $config.host + '/api/CitySharing/getCityOrder',
        xiaojiansudi: $config.host + '/api/Distribution/orderInfoP',
        tongchengkuaiche: $config.host + '/api/Cityexpress/orderInfoP'
      },
      statusUrl: {
        kuaidibao: $config.host + '/api/Expresspass/getStatus',
        tongchenggongpei: $config.host + '/api/Citysemidiurnal/getStatus',
        xianshitong: $config.host + '/api/CitySharing/getStatus',
        xiaojiansudi: $config.host + '/api/Distribution/checkstatus',
        tongchengkuaiche: $config.host + '/api/Cityexpress/checkstatus'
      },
      cancelUrl: {
        kuaidibao: $config.host + '/api/Expresspass/cancelExpressOrder',
        tongchenggongpei: $config.host + '/api/Citysemidiurnal/CancelCityOrder',
        xianshitong: $config.host + '/api/CitySharing/CancelCityOrder',
        xiaojiansudi: $config.host + '/api/Distribution/orderCancelP',
        tongchengkuaiche: $config.host + '/api/Cityexpress/orderCancelP'
      }
    }
  },
  methods: {
    goback() {
      this.$router.go(-1)
    },
    confirmPicker(str, unixTime) {
      this.show = false
      const uid =  this.uid
      const oid = this.oid
      this.btnLoading = true
      this.$vux.loading.show({
        text: '重派运单中'
      })
      this.$http.post(this.tryAgainUrl[this.type], qs.stringify({
        uid,
        oid,
        pick_up_time: unixTime,
        client: $config.client_type,
        device: $config.device_type,
        token: this.$store.state.userInfo.token
      })).then((res) => {
        this.$vux.loading.hide()
        const {code, msg} = res.data
        if(code == '1') {
          this.$vux.toast.text('重派成功', 'middle')
          this.$router.push('order2')
        } else if (code == '3') {
          this.$vux.toast.text($config.loginErrMsg, 'middle')
          this.$router.push({path: '/logout'})
        } else {
          this.$vux.toast.text(msg, 'middle')
        }
        this.btnLoading = false
      }).catch((err) => {
        this.btnLoading = false
        this.$vux.loading.hide()
        this.$vux.toast.text($config.errMsg, 'middle')
      })
    },
    //重派此单
    handleAgain() {
      this.show = true
    },
    //获取状态
    getStatus(callback = () => {}) {
      const oid = this.$route.query.oid
      this.$http.post(this.statusUrl[this.type], qs.stringify({
        oid,
        uid: this.uid,
        client: $config.client_type,
        device: $config.device_type,
        token: this.$store.state.userInfo.token
      })).then(res => {
        const { code, msg, data } = res.data
        if(code == '1' || code == '2') {
          callback(data)
        } else if (code == '3') {
          this.$vux.toast.text($config.loginErrMsg, 'middle')
          this.$router.push({path: '/logout'})
        } else {
          this.$vux.toast.text(msg, 'middle')
        }
      }).catch(err => {
        this.$vux.toast.text($config.errMsg, 'middle')
      })
    },
    //取消运单
    handleCancelOrder() {
      this.getStatus((data) => {
        if(!data) {
          const content = '运单正在匹配中, 确认要取消订单吗?'
          const cancelText = '取消运单'
          this.$vux.confirm.show({
            title: '<i class="icon icon-gantanhao"></i>',
            content,
            confirmText: '再等等',
            cancelText,
            onCancel: () => {
              this.cancelOrder()
            }
          })
        } else {
          this.showReason = true
        }
      })
    },
    reasonSub(reason) {
      this.reason = reason
      this.cancelOrder()
    },
    cancelOrder() {
      this.$http.post(this.cancelUrl[this.type], qs.stringify({
        uid: this.uid,
        oid: this.oid,
        cancel: this.reason,
        client_type: 99,
        client: $config.client_type,
        device: $config.device_type,
        token: this.$store.state.userInfo.token
      })).then(res => {
        const { msg, code} = res.data
        if(code == '1') {
          this.$router.go(-1)
          this.$vux.toast.text('运单已取消', 'middle')
        } else if (code == '3') {
          this.$vux.toast.text($config.loginErrMsg, 'middle')
          this.$router.push({path: '/logout'})
        } else {
          this.$vux.toast.text(msg, 'middle')
        }
      }).catch(err => {
        this.$vux.toast.text($config.errMsg, 'middle')
      })
    }
  }

}
</script>
<style lang="less" scoped>
  @import '../styles/order.css';
  .icon-quan1.green{
    color: #2fa42c;
  }
  .addresslist p{
    line-height: 0.6rem;
  }
  .footer-action{
    height: 1.1rem;
    line-height: 0.9rem;
    background: #fff;
    position: fixed;
    bottom:0rem;
    right:0rem;
    padding: 0.1rem 0.2rem;
    left: 0rem;
  }
</style>
